<template>
  <wd-form-item
    v-if="
      typeof props.component.display == 'undefined' ||
      props.component.display === true
    "
    :component="props.component"
    :custom-field="props.customField"
  >
    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
        <el-tree-select
        v-model="value"
        :data="props.component.data ?? dictList[dictIndex] ?? []"
        :placeholder="props.component.placeholder ?? `请选择${props.component.title}`"
        :show-checkbox="props.component.showCheckbox?? false"
        :render-after-expand="true"
        :disabled="props.component.disabled"
        :multiple="props.component.multiple"
        :check-strictly="props.component.checkStrictly?? true"
        check-on-click-node
        clearable
        default-expand-all
        :size="props.component.size"
            :props="{ class: customNodeClass }"
        >
        </el-tree-select>
    </slot>
  </wd-form-item>
</template>

<script setup>
// 写在头部
//render-after-expand 是否在第一次展开某个树节点后才渲染其子节点
// show-checkbox
// multiple 是否多选
//check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
import { ref, inject, onMounted, watch } from "vue";
import { get, set } from "lodash";
const props = defineProps({
  component: Object,
  customField: { type: String, default: undefined },
});
const customNodeClass = ref('wd-tree-select')
const formModel = inject("formModel");
const dictList  = inject('dictList')

const index = props.customField ?? props.component.dataIndex;
const value = ref(get(formModel.value, index));

watch( () => get(formModel.value, index), vl => value.value = vl )
watch( () => value.value, v => {
  set(formModel.value, index, v)
  index.indexOf('.') > -1 && delete formModel.value[index]
} )
//当前字段对应字典
const dictIndex = index.match(/^(\w+\.)\d+\./) ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex : props.component.dataIndex

if (props.component.dict && (props.component.dict.name || props.component.dict.data) && !props.component.multiple) { 
  value.value = value.value + ''
}

</script>
<style lang="less">
    .wd-tree-select{
        padding: 4px 0;
        .el-select-dropdown__item{
            height: 26px;
            line-height: 26px;
        }
    }
</style>